<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            font-size: 16px;
        }
        /* .btn {
            display: inline-block;
            padding: .3em .8em;
            border: 1px solid #446d88;
            background: #58a linear-gradient(#77a0bb, #58a);
            border-radius: .2em;
            box-shadow: 0 .05em .25em gray;
            color: white;
            text-shadow: 0 -.05em .05em #335166;
            font-size: 125%;
            line-height: 1.5;
        } */
        /* 1.在这个例子中，行高是字号的1.5 倍。因此，把代码改成下面这样会更易维护 */
        /* 2.如果我们决定把父级的字号加大，就不得不修改每一处使用绝对值作为字体尺寸的样式。如果改用百分比或em 单位就好多了 */
        /* 3.如果我们把这些长度值都改成em 单位，那这些效果
        的值就都变成可缩放的了，而且是依赖字号进行缩放1①。按照这种方法，我
        们就可以在一处控制按钮的所有尺寸样式了 */
        /* 4.此时就需要重新审视到底哪
        些效果应该跟着按钮一起放大，而哪些效果是保持不变的。比如在这个例子
        中，我们希望按钮的边框粗细保持在1px，不受按钮尺寸的影响。 */
        /* 推荐使用HSLA 而不是
        RGBA 来产生半透明的白色，因
        为它的字符长度更短，敲起来也
        更快。这归功于它的重复度更低。 */
        
        .btn {
            display: inline-block;
            padding: .3em .8em;
            border: 1px solid rgba(0, 0, 0, .1);
            background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
            border-radius: .2em;
            box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
            color: white;
            text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
            font-size: 125%;
            line-height: 1.5;
            border-width: 10px 10px 10px 0;
        }
        
        .cancel {
            background-color: #c00;
        }
        
        .ok {
            background-color: #6b0;
        }
        /* 为一个元素添加一道10px 宽的边框，但左侧不加边框。 */
        /* border-width: 10px 10px 10px 0;
        只要这一条声明就可以搞定了，但如果日后要改动边框的宽度，你需要
        同时改三个地方。如果把它拆成两条声明的话，改起来就容易多了，而且可
        读性或许更好一些：
        border-width: 10px;
        border-left-width: 0; */
        /* 假设我们想让所有的水平分割线（所有<hr> 元素）自动与
        文本的颜色保持一致。有了currentColor 之后，我们只需要这样写：
          hr {
          height: .5em;
          background: currentColor;
          }
         */
        
        hr {
            height: .5em;
            background: currentColor;
        }
    </style>
</head>

<body>
    <div>
        <div class="btn">
            yes!
        </div>
        <div class="btn cancel">
            yes!
        </div>
        <div class="btn ok">
            yes!
        </div>
        <hr>
    </div>


</body>

</html>